<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #box {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        input {
            border: 1px solid black;
            width: 350px;
            height: 35px;

        }

        span {
            border: 1px solid black;
            height: 35px;
            display: inline-block;
            font-size: 14px;
            line-height: 35px;
            width: 50px;
            text-align: center;
            cursor: pointer;
            background-color: gray;
            color: white;
        }

        .select {
            position: absolute;
            border: 1px solid blue;
            width: 350px;
            display: none;
        }
    </style>
</head>

<body>
    <div id="box">
        <input type="text">
        <span>搜索</span>
        <div class="select">
            <!-- <p>你好nihaojjjjjjjjjjj</p>
            <p>你好</p>
            <p>你好</p>
            <p>你好</p>
            <p>你好</p> -->
        </div>
    </div>
    <script src="./public.js"></script>
    <script>
        // ?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=32218,1425,31672,32139,31254,32045,32230,32299,31639&wd=123&req=2&csor=5&pwd=hell&cb=jQuery110209460874033153552_1594630926712&_=1594630926722
        let input = document.querySelector('input');
        let select = document.querySelector('.select');

        input.oninput = function () {
            let tex = input.value;
            select.style.display = 'block';
            ajax({
                method: "jsonp",
                url: "https://www.baidu.com/sugrec",
                data: {
                    pre: 1,
                    p: 3,
                    ie: "utf-8",
                    json: 1,
                    prod: "pc",
                    from: "pc_web",
                    sugsid: "32218,1425,31672,32139,31254,32045,32230,32299,31639",
                    wd: tex,
                    req: 2,
                    csor: 5,
                    cb: "callback",
                    _: Date.now()
                },
                jsonpcallback: "callback",
                callback: function (data) {
                    console.log(data);
                    select.innerHTML = `<p>${data.g[0].q}</p>
                                        <p>${data.g[1].q}</p>
                                        <p>${data.g[2].q}</p>
                                        <p>${data.g[3].q}</p>
                                        <p>${data.g[4].q}</p>
                                        <p>${data.g[5].q}</p>
                                        <p>${data.g[6].q}</p>
                                        <p>${data.g[7].q}</p>
                                        <p>${data.g[8].q}</p>
                                        <p>${data.g[9].q}</p>`;
                }
            })
        }

        input.onblur = function () {
            select.style.display = 'none';
        }
    </script>
</body>

</html>